<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2019/8/18
 * Time: 17:30
 */
$activity = $this->context->activity;
$this->title = $activity->title;

use yii\helpers\Html; ?>

<style>

    body {
        height: 100%;
    }

    .tc {
        text-align: center;
    }

    .mb10 {
        margin-bottom: 10px;
    }

    .statics {
        /*border-top: 4px solid #eee;*/
        /*border-bottom: 4px solid #eee;*/
        text-align: center;
        padding: 20px 0 40px 0;
        color: white;
    }

    .statics_number {
        font-weight: bold;
        font-size: 18px;
    }

    .rank_bank {
        width: 50%;
    }

    .cup_bank {
        width: 25%;
        margin-bottom: 10px;
    }

    .o_avatar {
        width: 80px;
        height: 80px;
        -webkit-border-radius: 40px;
        -moz-border-radius: 40px;
        border-radius: 40px;
    }

    .o_avatar2 {
        width: 60px;
        height: 60px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        border-radius: 30px;
    }

    .o_top1 {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: yellow;
        display: inline-block;
        color: darkgoldenrod;
    }

    .o_top2 {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: lightskyblue;
        display: inline-block;
        color: lightseagreen;
    }

    .o_top3 {
        position: absolute;
        bottom: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: burlywood;
        display: inline-block;
        color: white;
    }

    .r4_card {
        margin-left: 10px;
        margin-right: 10px;
        position: relative;
    }

    .top1 {
        position: absolute;
        top: -40px;
        height: 40px;
        background: white;
        border-radius: 4px 4px 0 0;
        width: 100%;
        margin-left: -15px;
    }

    .player_p {
        margin-bottom: 0;
    }

    .rank_item {
        border-top: 1px solid #eeeeee;
        height: 80px;
        line-height: 80px;
        margin: 0 20px;
    }

    .rank_num {
        font-weight: bold;
        font-size: 24px;
        color: #eeeeee;
    }

    .vote_num {
        color: gray;
    }

</style>

<?= \frontend\widgets\Swiper::widget(['model' => $activity]) ?>

<div class="container-fluid">
    <div class="row statics main-bg-color">
        <div class="col-xs-4">
            <div>
                <p class="statics_number"><?= $activity->view_number ?></p>
                <p><?= Yii::t('app.c2', 'Total View') ?></p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="separator">
                <p class="statics_number"><?= $activity->vote_number ?></p>
                <p><?= Yii::t('app.c2', 'Total Vote') ?></p>
            </div>
        </div>
        <div class="col-xs-4">
            <div class="separator">
                <p class="statics_number"><?= $activity->share_number ?></p>
                <p><?= Yii::t('app.c2', 'Total Share') ?></p>
            </div>
        </div>

    </div>


    <div class="row main-bg-color" style="padding-bottom: 40px">
        <div class="tc" style="margin-bottom: 20px">
            <img class="rank_bank" src="/images/common/rank_fly.jpg">
        </div>

        <div class="tc">
            <img class="cup_bank" src="/images/common/cup.png">
        </div>

        <div class="container r4_card" style="margin-bottom: 20px">


            <!--            top3-->
            <div class="row">
                <div class="col-xs-4 tc">
                    <div style="position: relative">
                        <img class="o_avatar mb10"
                             src="<?= !is_null($data[1]) ? $data[1]->getThumbnailUrl() : '' ?>">
                        <span class="o_top2">2</span>
                    </div>
                    <p class="main-font-color player_p"><?= !is_null($data[1]) ? $data[1]->label : '' ?></p>
                    <p class="player_p"><?= !is_null($data[1]) ? Yii::t('app.c2', '{s1} Votes', [
                            's1' => $data[1]->total_vote_number
                        ]) : '' ?></p>
                </div>
                <div class="col-xs-4 tc">
                    <div class="top1"></div>
                    <div style="position: relative">
                        <img class="o_avatar mb10"
                             src="<?= !is_null($data[0]) ? $data[0]->getThumbnailUrl() : '' ?>">
                        <span class="o_top1">1</span>
                    </div>
                    <p class="main-font-color player_p"><?= !is_null($data[0]) ? $data[0]->label : '' ?></p>
                    <p class="player_p"><?= !is_null($data[0]) ? Yii::t('app.c2', '{s1} Votes', [
                            's1' => $data[0]->total_vote_number
                        ]) : '' ?></p>
                </div>
                <div class="col-xs-4 tc">
                    <div style="position: relative">
                        <img class="o_avatar mb10"
                             src="<?= !is_null($data[2]) ? $data[2]->getThumbnailUrl() : '' ?>">
                        <span class="o_top3">3</span>
                    </div>
                    <p class="main-font-color player_p"><?= !is_null($data[0]) ? $data[2]->label : '' ?></p>
                    <p class="player_p"><?= !is_null($data[2]) ? Yii::t('app.c2', '{s1} Votes', [
                            's1' => $data[2]->total_vote_number
                        ]) : '' ?></p>
                </div>
            </div>
            <!--            top3-->

            <!--            top7-->
            <?php foreach (array_slice($data, 2, 8) as $datum): ?>
                <?php $rank_num = 4 ?>
                <div class="row">
                    <div class="rank_item">
                        <div class="col-xs-1 tc">
                            <span class="rank_num"><?= $rank_num ?></span>
                        </div>
                        <div class="col-xs-4 tc">
                            <img class="o_avatar2" src="<?= $datum->getThumbnailUrl() ?>">
                        </div>
                        <div class="col-xs-4" style="margin: 0;padding: 0">
                            <span class="main-font-color"><?= $datum->label ?></span>
                        </div>
                        <div class="col-xs-2 tc vote_num">
                            <?= Yii::t('app.c2', '{s1} Votes', [
                                's1' => $datum->total_vote_number
                            ]) ?>
                        </div>
                    </div>
                </div>
                <?php $rank_num++ ?>
            <?php endforeach; ?>
            <!--            top7-->
        </div>
    </div>
</div>


<script type="text/javascript">
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        //shareData 参数记得为字符串类型
        var shareData = {
            title: '<?= $activity->title ?>',
            desc: '<?= Html::encode($activity->content) ?>',//这里请特别注意是要去除html
            link: '<?= Yii::$app->request->hostInfo . Yii::$app->request->url ?>',//域名必须JS安全域名
            imgUrl: '<?= $activity->getThumbnailUrl() ?>',
            success: function () {

            },
            cancel: function () {
                console.log('cancel')
            }
        };

        if (wx.onMenuShareAppMessage) { //微信文档中提到这两个接口即将弃用，故判断
            wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
            wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
        } else {
            wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
            wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
        }

    });
</script>